﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mftemp.aspx.cs" Inherits="msBsc.WebUi.mMall.Seller.mftemp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>手机地接客商城</title>
    <%=getMeta()%>
    <link rel="stylesheet" type="text/css" href="/themes/mStyle1/mGlobal.css" charset="gbk" />
    <link href="/jqPlugin/Jcrop/css/jquery.Jcrop.min.css" rel="stylesheet" />
    <%=getBodyBeforeJs()%>
    <style>
        /*.error {
            font-size: 18px;
            font-weight: bold;
            color: red;
            margin: 10px 0;
        }

        label {
            width: 60px;
            display: inline-block;
        }

        .info li {
            margin: 10px 0;
        }*/

        .jcrop-holder {
            width:auto;
            max-width:100% !important;
        }
    </style>
</head>
<body>
    <div class="viewport">
        <div class="demo">
            <form>
                <input type="hidden" id="filesize" name="filesize" class="input" autocomplete="off" />
                <input type="hidden" id="filetype" name="filetype" class="input" autocomplete="off" />
                <input type="hidden" id="filedim" name="filedim" class="input" autocomplete="off" />
                <input type="hidden" id="w" name="w" class="input" autocomplete="off" />
                <input type="hidden" id="h" name="h" class="input" autocomplete="off" />

                <input type="file" name="image_file" id="image_file" onchange="dd(this)" />

                <div class="error">注意：上传前，先截图</div>
                <input type="button" value="上传(获取到64编码)" onclick="dotest();" />
                <div class="step2">
                    <img id="preview" />
                   <%-- <div class="info">
                        <ul>
                            <li>
                                <label>文件大小</label>
                                <input type="hidden" id="filesize" name="filesize" class="input" autocomplete="off" /></li>
                            <li>
                                <label>hidden</label>
                                <input type="hidden" id="filetype" name="filetype" class="input" autocomplete="off" /></li>
                            <li>
                                <label>图像尺寸</label>
                                <input type="hidden" id="filedim" name="filedim" class="input" autocomplete="off" /></li>
                            <li>
                                <label>宽度</label>
                                <input type="hidden" id="w" name="w" class="input" autocomplete="off" /></li>
                            <li>
                                <label>高度</label>
                                <input type="hidden" id="h" name="h" class="input" autocomplete="off" /></li>
                        </ul>
                    </div>--%>
                    <%--<input type="button" value="上传(获取到64编码)" onclick="dotest();" />--%>
                </div>
            </form>
        </div>
    </div>
    <script src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
    <script src="/jqPlugin/js/jBase.js"></script>
    <script src="/jqPlugin/js/jBPage.js"></script>
    <script src="/jqPlugin/js/laytpl.js"></script>
    <script src="/jqPlugin/Jcrop/js/jquery.Jcrop.min.js"></script>
    <script src="/jqPlugin/Jcrop/js/script.js"></script>
    <script type="text/javascript">
        //function submitImg() {

        //    if (!checkForm()) {
        //        return;
        //    }

        //    var ab = $("#abscissa").val();
        //    var or = $("#ordinate").val();
        //    var typeview = $("#typeview").val();
        //    var filedata = $("#filedata").val();
        //    var w = $("#img_width").val();
        //    var h = $("#img_height").val();
        //    $.post("/jqPlugin/Jcrop/upfile.aspx", {
        //        abscissa: ab, ordinate: or,
        //        type: "transaction",
        //        typeview: typeview,
        //        filedata: filedata,
        //        width: w,
        //        height: h
        //    }, function (dt) {
        //        alert(dt);
        //    });
        //}

        function bytesToSize(bytes) {
            var sizes = ['Bytes', 'KB', 'MB'];
            if (bytes == 0)
                return 'n/a';
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
        }

        // check for selected crop region
        function checkForm() {
            if (parseInt($('#w').val()))
                return true;
            $('.error').html('请先选择图片，并且截图').show();
            return false;
        }
        //jQuery(window).resize(function () {

        //    var w = $(".jcrop-holder").width();
        //    //alert(w);
        //    var imgw = $(".jcrop-holder img").width();
        //    if (imgw > w) {
        //        $(".jcrop-holder img").width(w);
        //        $(".jcrop-holder .jcrop-tracker").width(w);
        //    }
        //});
        function dd(_sender) {
            fileSelectHandler(_sender, cc);
        }


        // clear info by cropping (onRelease event handler)
        function clearInfo() {
            alert(0);
            $('.info #w').val('');
            $('.info #h').val('');
        }

        function getImg(data) {
            alert(data.url)
            $(".step2 .jcrop-holder").remove();
            $("#preview").attr("src", data.url);
            $("#preview").css("visibility", "inherit");
            $("#preview").css("height", "auto");
            $("#preview").css("width", "auto");
            $("#preview").show();
        }

        function cc() {
            alert($(".jcrop-holder img").width());
        }


        function fileSelectHandler(_sender,ac) {
            $.ajaxSettings.async = true;
            $(".step2").html("");
            $(".step2").html("<img id='preview' />");
            //debugger;
            var _finput = _sender;
            var updateInfo = function (e) {
                $(_finput).attr('x', e.x).attr('y', e.y).attr('w', e.w).attr('h', e.h);
                //$('#x1').val(e.x);
                //$('#y1').val(e.y);
                //$('#x2').val(e.x2);
                //$('#y2').val(e.y2);
                //$('#w').val(e.w);
                //$('#h').val(e.h);
            }
            ;
            // get selected file
            var oFile = _finput.files[0];

            // hide all errors
            $('.error').hide();

            // check for image type (jpg and png are allowed)
            var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/i;
            if (!rFilter.test(oFile.type)) {
                $('.error').html('请选择jpg、jpeg或png格式的图片').show();
                return;
            }

            // check for file size
            if (oFile.size > 1000 * 1024) {
                $('.error').html('请上传小于1M的图片').show();
                return;
            }
            //$(".step2 .jcrop-holder").remove();
            //$('#preview').removeAttr("src");
            // preview element
            var oImage = document.getElementById('preview');

            // prepare HTML5 FileReader
            var oReader = new FileReader();
           
            oReader.onload = function (e) {
                // e.target.result contains the DataURL which we can use as a source of the image
                oImage.src = e.target.result;
                oImage.onload = function () { // onload event handler

                    // display step 2
                    $('.step2').fadeIn(500);

                    //// display some basic image info
                    //var sResultFileSize = bytesToSize(oFile.size);
                    //$('#filesize').val(sResultFileSize);
                    //$('#filetype').val(oFile.type);
                    //if (oImage.naturalWidth > $(".step2").width()) {
                    //    oImage.naturalWidth = $(".step2").width();
                    //    alert(oImage.naturalWidth)
                    //}

                    // Create variables (in this scope) to hold the Jcrop API and image size
                    var jcrop_api, boundx, boundy;

                    // destroy Jcrop if it is existed
                    if (typeof jcrop_api != 'undefined')
                        jcrop_api.destroy();

                    // initialize Jcrop
                    $('#preview').Jcrop({
                        minSize: [32, 32], // min crop size
                        aspectRatio: 1, // keep aspect ratio 1:1
                        bgFade: true, // use fade effect
                        bgOpacity: .3, // fade opacity
                        onChange: updateInfo,
                        onSelect: updateInfo,
                        onRelease: clearInfo,
                        boxWidth: $(".step2").width(),
                        boxHeight: 300,
                    }, function () {

                        // use the Jcrop API to get the real image size
                        var bounds = this.getBounds();
                        boundx = bounds[0];
                        boundy = bounds[1];

                        // Store the Jcrop API in the jcrop_api variable
                        jcrop_api = this;
                    });
                };
            };
            // read selected file as DataURL
            oReader.readAsDataURL(oFile);

            oReader.onloadend = function (e) {
                //alert($(".jcrop-holder").length);
            };
            
        }




        function dotest() {
            //alert($(".jcrop-holder img").width());
            //alert($('#image_file').attr('x') + " - " + $('#image_file').attr('y' + " - " + $('#image_file').attr('w') + " - " + $('#image_file').attr('h')));
            var img64 = getimg($('#image_file').attr('x'), $('#image_file').attr('y'), $('#image_file').attr('w'), $('#image_file').attr('h'));

            var opart = new jsonRow();
            alert(img64.split(',')[1]);
            opart.AddCell("str64", img64.split(',')[1]);
            opart.AddCell("postFileNme", $("#image_file").val());
            opart.AddCell("ACTION", "doto");
            ajaxComm(opart);
            alert(img64.split(',')[1]);
        }
        function getimg(x, y, width, height) {
            var canvas = $('<canvas width="' + width + '" height="' + height + '"></canvas>')[0],
                ctx = canvas.getContext('2d');

            ctx.drawImage(preview, x, y, width, height, 0, 0, width, height);
            return canvas.toDataURL();
            //$(document.body).append(canvas);
        }

    </script>
</body>
    <%=getBodyAfterJs() %>
</html>
